<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ladybird - 邮箱/手机号登录</title>
        <jsp:include page="top-link.jsp"></jsp:include>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/index.css"/>
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/login.css"/>
    </head>
    <body>
        <!-- 头部导航 -->
        <ul class="layui-nav layui-bg-blue" style="background-color: #eeeeee !important;">
            <a href="${pageContext.request.contextPath}/api/v1/pub/user/json/index" style="color: #000000;"><img
                    style="margin-top: 10px"
                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/ladybird.png"></a>
        </ul>

        <!-- 中间内容 -->
        <div class="center">
            <form class="layui-form" action="${pageContext.request.contextPath}/api/v1/pri/user/do/login-by-code-data"
                  method="post">
                <span style="color:red;">${msg}</span>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="star_color">*</span> 用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="account" lay-verify="required" autocomplete="off"
                                   placeholder="手机号或者手机号" class="layui-input">
                        </div>
                        <button id="getCode" type="button" class="layui-btn layui-btn-radius layui-btn-normal">发送验证码
                        </button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> <span class="star_color">*</span> 验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" lay-verify="code" placeholder="请填写6位验证码" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="color: white;">请填写6位验证码</div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="login-by-code" value="login-by-code">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="star_color">*</span> 滑动验证</label>
                    <div class="layui-input-block">
                        <div id="slider"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" style="background-color: #1e9fff;" lay-submit=""
                                lay-filter="demo1">登录
                        </button>
                        <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
                        <a href="${pageContext.request.contextPath}/api/v1/pri/user/do/register">&nbsp;&nbsp; 注册</a> |
                        <a
                                href="${pageContext.request.contextPath}/api/v1/pri/user/do/login-by-account">密码登录</a> |
                        <a
                                href="${pageContext.request.contextPath}/api/v1/pri/user/do/reset-pwd">修改密码</a>
                    </div>
                </div>
            </form>
        </div>

        <!-- 尾部导航 -->
        <%@include file="foot-nav.jsp" %>
        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/js/verify-account.js"
                type="text/javascript" charset="utf-8"></script>
        <script>
            // 数据验证
            layui.use(['form', 'jquery'], function () {
                var $ = layui.jquery
                // 点击发送验证码的验证
                $('#getCode').click(function () {
                        // 拿到手机号数据，对其进行正则表达验证
                        var res = $(" input[ name='account' ] ").val()
                        // 正则表达式
                        // 验证手机号
                        var patternPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
                        // 验证邮箱
                        var patternEmail = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                        // 验证手机号的结果
                        var resPhone = patternPhone.test(res)
                        if (resPhone) {
                            // 手机验证通过 发送Ajax请求
                            $.ajax({
                                url: "${pageContext.request.contextPath}/api/v1/pub/common/code",
                                traditional: true,
                                type: "post",
                                data: {
                                    "account": res,
                                    "isRegister": "0"
                                },
                                success: function (result) {
                                    layer.open({
                                        title: '系统提示',
                                        content: result.msg
                                    });
                                }
                            })
                        } else {
                            // 继续验证电子邮箱
                            var resEmail = patternEmail.test(res)
                            // 成功
                            if (resEmail) {
                                // 邮箱验证通过 发送Ajax请求
                                // 手机验证通过 发送Ajax请求
                                $.ajax({
                                    url: "${pageContext.request.contextPath}/api/v1/pub/common/code",
                                    traditional: true,
                                    type: "post",
                                    data: {
                                        "account": res,
                                        "isRegister": "0"
                                    },
                                    success: function (result) {
                                        layer.open({
                                            title: '系统提示',
                                            content: result.msg
                                        });
                                    }
                                })
                                // 不是邮箱也不是手机号
                            } else {
                                layer.open({
                                    title: '哎呀，出错了',
                                    content: '请输入有效的用户名（手机号或者邮箱）'
                                });
                            }
                        }
                    }
                )
            })
        </script>
    </body>
</html>
